<template>
<div>
  <div>
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-input placeholder="请输入员工名" size="small" prefix-icon="el-icon-search" v-model="keyWord"
                  clearable @keydown.enter.native="initEmps"
                  @clear = "initEmps"
                  :disabled="showAdvance"
                  style="width: 300px;margin-right: 10px"></el-input>
        <el-button icon="el-icon-search" type="primary" size="mini" @click="initEmps" :disabled="showAdvance">搜素</el-button>
        <el-button icon="el-icon-circle-plus-outline" type="primary" size="mini" @click="showNewEmps">待添加员工</el-button>
<!--        <el-button icon="el-icon-s-data" type="primary" size="mini" @click="showAdvance=!showAdvance">高级搜素</el-button>-->
      </div>
      <div>
        <el-button @click="exportData" type="success" size="mini" icon="el-icon-download">导出员工</el-button>
        <el-upload
            style="display: inline-flex;margin-left: 10px;margin-right: 10px"
            class="upload-demo"
            :before-upload="beforeupload"
            :show-file-list="false"
            :disabled="importDataDisabled"
            :on-success="onSuccess"
            :on-error="onError"
            action="/emp/basic/import">
          <el-button :disabled="importDataDisabled" type="success" size="mini" :icon="this.uploadBtnIcon">{{this.uploadBtnText}}</el-button>
        </el-upload>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAdd">添加员工</el-button>
      </div>
    </div>
    <transition name="el-zoom-in-top">
    <div style="border: 2px solid #409eff;border-radius: 10px;box-sizing: border-box;padding: 5px;margin: 10px 10px;" v-show="showAdvance">
      <el-row>
        <el-col :span="6"><div class="fontclass">
         政治面貌
          <el-select v-model="searchValue.politicId" placeholder="请选择" size="mini" style="width: 130px;">
            <el-option
                v-for="item in politicsstatus"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
        </el-col>
        <el-col :span="5">
          <div  class="fontclass">
            民族
            <el-select v-model="searchValue.nationId" placeholder="请选择" size="mini" style="width: 130px;">
                <el-option
                    v-for="item in nations"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </div>
        </el-col>
        <el-col :span="5">
          <div class="fontclass">
            职称
            <el-select v-model="searchValue.joblevelId" placeholder="请选择" size="mini" style="width: 130px;">
              <el-option
                  v-for="item in joblevels"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="fontclass">
            职位
            <el-select v-model="searchValue.posId" placeholder="请选择" size="mini" style="width: 150px;">
              <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <div class="fontclass" style="margin-top: 8px">
            聘用形式
            <el-radio size="mini" v-model="searchValue.engageForm" label="劳动合同">劳动合同</el-radio>
            <el-radio size="mini" v-model="searchValue.engageForm" style="margin-left: 0px" label="劳务合同">劳务合同</el-radio>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="fontclass">
            所属部门
            <el-popover
                placement="right"
                title="请选择部门"
                width="220"
                trigger="manual"
                v-model="visible1">
              <el-tree default-expand-all :data="allDeps" :props="defaultProps" @node-click="searchViewhandleNodeClick('advance')"></el-tree>
              <div slot="reference" style="width: 150px;display: inline-flex;font-size: 13px;border: #dedede 1px solid;height: 26px;border-radius: 5px;margin-top: 5px;
                  cursor:pointer;align-items: center;padding-left: 12px;box-sizing: border-box" @click="showDepView1()">{{this.inputDepName}}</div>
            </el-popover>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="fontclass" style="margin-top: 4px">
            <span class="demonstration">入职日期 </span>
            <el-date-picker
                v-model="searchValue.beginDateScope"
                type="daterange"
                size="mini"
                value-format="yyyy-MM-dd "
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </el-col>
      </el-row>
      <el-row>

        <el-col :span="4" :offset="20">
          <div style="margin-top: 5px">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="initEmps('advance')">搜索</el-button>
            <el-button size="mini">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
<!--    <div style="border: 1px solid #409eff;border-radius: 5px;-->
<!--    box-sizing: border-box;padding: 5px 0px;margin: 10px 10px"></div>-->
    </transition>
  </div>
  <div style="margin-top: 10px">
    <el-table
        v-loading = "loading"
        :data="emps"
        stripe
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          fixed
          width="85"
          align="left">
      </el-table-column>
      <el-table-column
          prop="workId"
          label="工号"
          width="100"
          align="left">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          width="100">
      </el-table-column>
      <el-table-column
          prop="birthday"
          label="出生日期"
          width="110">
      </el-table-column>
      <el-table-column
          prop="idCard"
          label="身份证号码"
          width="180"
          align="left">
      </el-table-column>
      <el-table-column
          prop="wedlock"
          label="婚姻状态">
      </el-table-column>
      <el-table-column
          prop="nation.name"
          label="民族">
      </el-table-column>
      <el-table-column
          prop="nativePlace"
          label="籍贯">
      </el-table-column>
      <el-table-column
          prop="politicsstatus.name"
          label="政治面貌">
      </el-table-column>
      <el-table-column
          prop="email"
          align="left"
          width="180"
          label="电子邮件">
      </el-table-column>
      <el-table-column
          prop="phone"
          align="left"
          width="160"
          label="电话号码">
      </el-table-column>
      <el-table-column
          prop="address"
          align="left"
          width="200"
          label="联系地址">
      </el-table-column>
      <el-table-column
          prop="department.name"
          align="left"
          label="所属部门">
      </el-table-column>
      <el-table-column
          prop="position.name"
          width="100"
          label="职位">
      </el-table-column>
      <el-table-column
          prop="joblevel.name"
          width="100"
          label="职称">
      </el-table-column>
      <el-table-column
          prop="engageForm"
          align="left"
          label="聘用形式">
      </el-table-column>
      <el-table-column
          prop="tipTopDegree"
          width="80"
          label="最高学历">
      </el-table-column>
      <el-table-column
          prop="specialty"
          align="left"
          width="150"
          label="专业">
      </el-table-column>
      <el-table-column
          prop="school"
          width="150"
          label="毕业院校">
      </el-table-column>
      <el-table-column
          prop="beginDate"
          width="110"
          align="left"
          label="入职日期">
      </el-table-column>
      <el-table-column
          prop="conversionTime"
          align="left"
          width="110"
          label="转正日期">
      </el-table-column>
      <el-table-column
          prop="beginContract"
          align="left"
          width="110"
          label="合同起始日期">
      </el-table-column>
      <el-table-column
          prop="endContract"
          align="left"
          width="110"
          label="合同终止日期">
      </el-table-column>
      <el-table-column
          prop="contractTerm"
          label="合同期限">
      </el-table-column>
      <el-table-column
          width="200"
          align="center"
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button  @click="showEditEmp(scope.row)"  type="primary" size="mini">编辑</el-button>
<!--          <el-button size="mini" type="primary">更多</el-button>-->
          <el-button @click="deleteEmp(scope.row)" size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: flex-end;margin-top: 5px">
      <el-pagination
          background
          @current-change="currentChange"
          @size-change="sizeChange"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="total">
      </el-pagination>
    </div>
  </div>
  <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="80%">
    <div>
      <el-form :rules="rules" :model="emp" ref="empForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名:" prop="name">
             <el-input prefix-icon="el-icon-edit" size="mini" style="width: 150px" v-model="emp.name" placeholder="请输入员工姓名"></el-input>
           </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性别:" prop="gender">
              <el-radio size="mini" v-model="emp.gender" label="男">男</el-radio>
              <el-radio size="mini" v-model="emp.gender" style="margin-left: 0px" label="女">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期:" prop="birthday">
              <el-date-picker
                  v-model="emp.birthday"
                  style="width: 150px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="政治面貌:" prop="politicId">
              <el-select v-model="emp.politicId" placeholder="请选择政治面貌" size="mini" style="width: 200px;">
                <el-option
                    v-for="item in politicsstatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="民族:" prop="nationId">
              <el-select v-model="emp.nationId" placeholder="请选择民族" size="mini" style="width: 150px;">
                <el-option
                    v-for="item in nations"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="籍贯:" prop="nativePlace">
              <el-input prefix-icon="el-icon-edit" size="mini" style="width: 120px" v-model="emp.nativePlace" placeholder="请输入籍贯"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电子邮箱:" prop="nativePlace">
              <el-input prefix-icon="el-icon-message" size="mini" style="width: 150px" v-model="emp.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系地址:" prop="address">
              <el-input prefix-icon="el-icon-map-location" size="mini" style="width: 200px" v-model="emp.address" placeholder="请输入联系地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="职位:" prop="posid">
              <el-select v-model="emp.posId" placeholder="请选择职位" size="mini" style="width: 150px;">
                <el-option
                    v-for="item in positions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="职称:" prop="joblevelId">
              <el-select v-model="emp.joblevelId" placeholder="请选择职称" size="mini" style="width: 120px;">
                <el-option
                    v-for="item in joblevels"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departmentId">
              <el-popover
                  placement="right"
                  title="请选择部门"
                  width="220"
                  trigger="manual"
                  v-model="visible">
                <el-tree default-expand-all :data="allDeps" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                <div slot="reference" style="width: 150px;display: inline-flex;font-size: 13px;border: #dedede 1px solid;height: 26px;border-radius: 5px;margin-top: 5px;
                  cursor:pointer;align-items: center;padding-left: 12px;box-sizing: border-box" @click="showDepView">{{inputDepName}}</div>
              </el-popover>
            </el-form-item>
            </el-col>
          <el-col :span="7">
            <el-form-item label="联系电话:" prop="phone">
              <el-input prefix-icon="el-icon-phone" size="mini" style="width: 200px" v-model="emp.phone" placeholder="请输入电话号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="工号:" prop="workId">
              <el-input :disabled="true" size="mini" style="width: 150px" v-model="emp.workId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="学历:" prop="tipTopDegree">
              <el-select v-model="emp.tipTopDegree" placeholder="最高学历" size="mini" style="width: 120px;">
                <el-option
                    v-for="item in tipTopDegrees"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毕业院校:" prop="school">
              <el-input size="mini" style="width: 150px" v-model="emp.school" placeholder="毕业院校名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="专业名称:" prop="specialty">
              <el-input prefix-icon="el-icon-edit" size="mini" style="width: 200px" v-model="emp.specialty" placeholder="请输入专业名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="入职日期:" prop="beginDate">
              <el-date-picker
                  v-model="emp.beginDate"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="转正日期:" prop="conversionTime">
              <el-date-picker
                  v-model="emp.conversionTime"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同起始日期:" prop="beginContract">
              <el-date-picker
                  v-model="emp.beginContract"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同终止日期:" prop="endContract">
              <el-date-picker
                  v-model="emp.endContract"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证号码" prop="idCard">
              <el-input prefix-icon="el-icon-edit" size="mini" style="width: 200px" v-model="emp.idCard" placeholder="请输入身份证"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="聘用形式:" prop="engageForm">
              <el-radio size="mini" v-model="emp.engageForm" label="劳动合同">劳动合同</el-radio>
              <el-radio size="mini" v-model="emp.engageForm" style="margin-left: 0px" label="劳务合同">劳务合同</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况:" prop="wedlock">
              <el-radio size="mini" v-model="emp.wedlock" label="已婚">已婚</el-radio>
              <el-radio size="mini" v-model="emp.wedlock" label="未婚">未婚</el-radio>
              <el-radio size="mini" v-model="emp.wedlock" label="离异">离异</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="doCancel">取 消</el-button>
    <el-button type="primary" @click="doAdd">确 定</el-button>
  </span>
  </el-dialog>
  <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="80%">
    <div>
      <el-form :rules="rules" :model="emp" ref="empForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名:" prop="name">
              <el-input prefix-icon="el-icon-edit" size="mini" style="width: 150px" v-model="emp.name" placeholder="请输入员工姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="性别:" prop="gender">
              <el-radio size="mini" v-model="emp.gender" label="男">男</el-radio>
              <el-radio size="mini" v-model="emp.gender" style="margin-left: 0px" label="女">女</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出生日期:" prop="birthday">
              <el-date-picker
                  v-model="emp.birthday"
                  style="width: 150px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="政治面貌:" prop="politicId">
              <el-select v-model="emp.politicId" placeholder="请选择政治面貌" size="mini" style="width: 200px;">
                <el-option
                    v-for="item in politicsstatus"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="民族:" prop="nationId">
              <el-select v-model="emp.nationId" placeholder="请选择民族" size="mini" style="width: 150px;">
                <el-option
                    v-for="item in nations"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="籍贯:" prop="nativePlace">
              <el-input prefix-icon="el-icon-edit" size="mini" style="width: 120px" v-model="emp.nativePlace" placeholder="请输入籍贯"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电子邮箱:" prop="nativePlace">
              <el-input prefix-icon="el-icon-message" size="mini" style="width: 150px" v-model="emp.email" placeholder="请输入电子邮箱"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系地址:" prop="address">
              <el-input prefix-icon="el-icon-map-location" size="mini" style="width: 200px" v-model="emp.address" placeholder="请输入联系地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="职位:" prop="posid">
              <el-select v-model="emp.posId" placeholder="请选择职位" size="mini" style="width: 150px;">
                <el-option
                    v-for="item in positions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="职称:" prop="joblevelId">
              <el-select v-model="emp.joblevelId" placeholder="请选择职称" size="mini" style="width: 120px;">
                <el-option
                    v-for="item in joblevels"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departmentId">
              <el-popover
                  placement="right"
                  title="请选择部门"
                  width="220"
                  trigger="manual"
                  v-model="visible">
                <el-tree default-expand-all :data="allDeps" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                <div slot="reference" style="width: 150px;display: inline-flex;font-size: 13px;border: #dedede 1px solid;height: 26px;border-radius: 5px;margin-top: 5px;
                  cursor:pointer;align-items: center;padding-left: 12px;box-sizing: border-box" @click="showDepView">{{inputDepName}}</div>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系电话:" prop="phone">
              <el-input prefix-icon="el-icon-phone" size="mini" style="width: 200px" v-model="emp.phone" placeholder="请输入电话号码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="工号:" prop="workId">
              <el-input :disabled="true" size="mini" style="width: 150px" v-model="emp.workId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="学历:" prop="tipTopDegree">
              <el-select v-model="emp.tipTopDegree" placeholder="最高学历" size="mini" style="width: 120px;">
                <el-option
                    v-for="item in tipTopDegrees"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="毕业院校:" prop="school">
              <el-input size="mini" style="width: 150px" v-model="emp.school" placeholder="毕业院校名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="专业名称:" prop="specialty">
              <el-input prefix-icon="el-icon-edit" size="mini" style="width: 200px" v-model="emp.specialty" placeholder="请输入专业名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="入职日期:" prop="beginDate">
              <el-date-picker
                  v-model="emp.beginDate"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="转正日期:" prop="conversionTime">
              <el-date-picker
                  v-model="emp.conversionTime"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同起始日期:" prop="beginContract">
              <el-date-picker
                  v-model="emp.beginContract"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合同终止日期:" prop="endContract">
              <el-date-picker
                  v-model="emp.endContract"
                  style="width: 120px"
                  size = "mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证号码" prop="idCard">
              <el-input prefix-icon="el-icon-edit" size="mini" style="width: 200px" v-model="emp.idCard" placeholder="请输入身份证"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="聘用形式:" prop="engageForm">
              <el-radio size="mini" v-model="emp.engageForm" label="劳动合同">劳动合同</el-radio>
              <el-radio size="mini" v-model="emp.engageForm" style="margin-left: 0px" label="劳务合同">劳务合同</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="婚姻状况:" prop="wedlock">
              <el-radio size="mini" v-model="emp.wedlock" label="已婚">已婚</el-radio>
              <el-radio size="mini" v-model="emp.wedlock" label="未婚">未婚</el-radio>
              <el-radio size="mini" v-model="emp.wedlock" label="离异">离异</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="doCancel">取 消</el-button>
    <el-button type="primary" @click="doAdd">确 定</el-button>
  </span>
  </el-dialog>



  <el-dialog
      title="待添加员工"
      :visible.sync="newEmpVisiable"
      width="30%">
    <span>
      <el-card v-for="(newEmp,index) in this.newEmps" style="margin-bottom: 10px">
        <div>
          {{newEmp.name}}
        <el-button style="float: right;margin-bottom: 20px" type="primary" @click="showAdd1(newEmp)">完善信息</el-button>
        </div>
      </el-card>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "EmpBasic",
  data(){
    return{
      title:'',
      searchValue:{
        politicId:-1,
        nationId:-1,
        departmentId: null,
        joblevelId: null,
        posId: null,
        engageForm:null,
        beginDateScope:null
      },
      emps:[],
      total:0,
      loading:false,
      page:1,
      size:10,
      dialogVisible:false,
      dialogVisible2:false,
      showAdvance:false,
      uploadBtnText:'导入员工',
      uploadBtnIcon:'el-icon-upload2',
      importDataDisabled:false,
      keyWord:'',
      nations:[],
      joblevels:[],
      politicsstatus:[],
      positions:[],
      visible:false,
      visible1:false,
      allDeps:[],
      rules:{
        name: [{required:true,message:'请输入姓名',trigger:'blur'}],
        gender: [{required:true,message:'请输入性别',trigger:'blur'}],
        birthday: [{required:true,message:'请选择生日',trigger:'blur'}],
        idCard: [{required:true,message:'请输入身份证号码',trigger:'blur'}],
        wedlock: [{required:true,message:'请选择婚姻状态',trigger:'blur'}],
        nationId: [{required:true,message:'请输入民族',trigger:'blur'}],
        nativePlace: [{required:true,message:'请输入籍贯',trigger:'blur'}],
        politicId: [{required:true,message:'请输入政治面貌',trigger:'blur'}],
        email: [{required:true,message:'请输入邮箱',trigger:'blur'}],
        phone: [{required:true,message:'请输入手机号',trigger:'blur'}],
        address: [{required:true,message:'请输入地址',trigger:'blur'}],
        departmentId: [{required:true,message:'请选择部门',trigger:'blur'}],
        joblevelId: [{required:true,message:'请选择职称',trigger:'blur'}],
        posId: [{required:true,message:'请选择职位',trigger:'blur'}],
        engageForm: [{required:true,message:'请选择合同',trigger:'blur'}],
        tipTopDegree: [{required:true,message:'请选择最高学历',trigger:'blur'}],
        specialty: [{required:true,message:'请输入专业',trigger:'blur'}],
        school: [{required:true,message:'请输入学校',trigger:'blur'}],
        contractTerm: [{required:true,message:'请输入合同期限',trigger:'blur'}],
        conversionTime: [{required:true,message:'请输入转正日期',trigger:'blur'}],
        beginContract: [{required:true,message:'请选择合同开始日期',trigger:'blur'}],
        endContract: [{required:true,message:'请选择合同结束日期',trigger:'blur'}],
        beginDate: [{required:true,message:'请选择入职日期',trigger:'blur'}],
      },
      inputDepName:'请选择部门',
      tipTopDegrees:['其他','小学','初中','高中','专科','本科','硕士','博士'],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      emp:{},
      newEmpVisiable : false,
      newEmps:[],
      newEmp:{}
    }
  },
  methods:{
    initEmps(type){
      this.loading=true;
      let url = '/emp/basic/?page='+this.page+ "&size=" + this.size;
      if(type && type=='advance'){
      url+='&politicId='+this.searchValue.politicId+'&nationId='+this.searchValue.nationId
        +'&posId='+this.searchValue.posId+'&jobLevelId='+this.searchValue.joblevelId
        +'&engageForm='+this.searchValue.engageForm+'&departmentId='+this.searchValue.departmentId
        +'&beginDateScope='+this.searchValue.beginDateScope;
      }else {
        url +=("&name=" + this.keyWord);
        this.getRequest(url).then(resp => {
          this.loading = false;
          if (resp) {
            this.emps = resp.data;
            console.log(this.emps);
            this.total = resp.total;
          }
        })
      }
    },
    initData(){
        this.getRequest("/emp/basic/nation").then(resp=>{
          if(resp){
            this.nations=resp;
          }
        })

        this.getRequest("/emp/basic/joblevel").then(resp=>{
          if(resp){
            this.joblevels=resp;
          }
        })

        this.getRequest("/emp/basic/politic").then(resp=>{
          if(resp){
            this.politicsstatus=resp;
          }
        })

        this.getRequest("/emp/basic/deps").then(resp=>{
          if(resp){
            this.allDeps=resp;
          }
        })
    },
    initPos(){
      this.getRequest("/emp/basic/position").then(resp=>{
        if(resp){
          this.positions=resp;
        }
      })
    },
    currentChange(currentPage){
      this.page=currentPage;
      this.initEmps();
    },
    sizeChange(currentSize){
      this.size=currentSize;
      this.initEmps();
    },
    showAdd(){
      this.title='添加员工';
      this.emp={
        name: "",
        gender: "",
        birthday: "",
        idCard: "",
        wedlock: "",
        nationId: null,
        nativePlace: "",
        politicId: null,
        email: "",
        phone: "",
        address: "",
        departmentId: null,
        joblevelId: null,
        posId: null,
        engageForm: "",
        tipTopDegree: "",
        specialty: "",
        school: "",
        beginDate: "",
        workId: "",
        contractTerm: "",
        conversionTime: "",
        beginContract: "",
        endContract: "",
        workAge: null,
      };
      this.dialogVisible=true;

      this.getMaxWorkId();
    },
    showAdd1(newEmp){
      this.title='待添加员工';
      this.emp={
        name: newEmp.name,
        gender: "",
        birthday: "",
        idCard: "",
        wedlock: "",
        nationId: null,
        nativePlace: "",
        politicId: null,
        email: newEmp.toeamil1,
        phone: newEmp.phone,
        address: "",
        departmentId: null,
        joblevelId: null,
        posId: null,
        engageForm: "",
        tipTopDegree: "",
        specialty: "",
        school: "",
        beginDate: "",
        workId: "",
        contractTerm: "",
        conversionTime: "",
        beginContract: "",
        endContract: "",
        workAge: null,
      };
      this.dialogVisible=true;
      this.getMaxWorkId();
      console.log(newEmp);
      this.putRequest("/interview/",newEmp).then(resp =>{
        if(resp){

        }
      })
    },
    getMaxWorkId(){
      this.getRequest("/emp/basic/maxWorkId").then(resp=>{
        if(resp){
          this.emp.workId=resp.obj;
        }
      })
    },
    showDepView(){
      this.visible=!this.visible;
    },
    showDepView1(){
      this.visible1=!this.visible1;
    },
    handleNodeClick(data) {
      this.inputDepName=data.name;
      this.emp.departmentId=data.id;
      this.visible=!this.visible;
    },
    doAdd(){
      if(this.emp.id){
        this.$refs['empForm'].validate(valid => {
          if (valid) {
            this.putRequest("emp/basic/", this.emp).then(resp => {
              if (resp) {
                this.dialogVisible = false
                this.initEmps();
                this.initNewEmps();
              }
            })
          }
        })
      }else {
        this.$refs['empForm'].validate(valid => {
          if (valid) {
            this.postRequest("emp/basic/", this.emp).then(resp => {
              if (resp) {
                this.dialogVisible = false
                this.initEmps();
              }
            })
          }
        })
      }
    },
    doCancel(){
      this.dialogVisible=false;
      this.visible=false;
    },
    deleteEmp(data){
      this.$confirm('此操作将永久删除【'+data.name+'】, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       this.deleteRequest("/emp/basic/"+data.id).then(resp=>{
         if(resp){
           this.initEmps();
         }
       })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showEditEmp(data){
      this.title="编辑员工信息";
      this.emp=data;
      this.dialogVisible=true;
    },
    exportData(){
      window.open('/emp/basic/export','_parent');
    },
    beforeupload(){
      this.uploadBtnText="导入中";
      this.uploadBtnIcon="el-icon-loading";
      this.importDataDisabled=true;
    },
    onSuccess(){
      this.uploadBtnText="导入员工";
      this.uploadBtnIcon="el-icon-upload2";
      this.importDataDisabled=false;
      this.initEmps();
    },
    onError(){
      this.uploadBtnText="导入员工";
      this.uploadBtnIcon="el-icon-upload2";
      this.importDataDisabled=false;
    },
    searchViewhandleNodeClick(data){
      this.inputDepName=data.name;
      this.searchValue.departmentId=data.id;
      this.visible=!this.visible;
    },
    initNewEmps() {
      this.getRequest('/interview/newEmps/').then(resp => {
        if (resp) {
          this.newEmps = resp;
        }
      })
    },
    showNewEmps(){
      this.newEmpVisiable = true;
    }
  },
  mounted(){
    this.initEmps();
    this.initData();
    this.initPos();
    this.initNewEmps();
  }
}
</script>

<style>
.fontclass{
  font-size: 14px;
  color: #606266;
}
</style>